<template>
  <div>
    <div style="background-color: #d87901;height: 500px;position: relative;overflow: hidden">
    </div>
    <div style="position: absolute;bottom: 300px;width: 90px;height: 20px;">
      <VoiceComponent1 :audioUrl="voiceContent[0].audioUrl"/> <!-- 将VoiceComponent包裹在点击区域内 -->
    </div>
    <div style="position: absolute;bottom: 200px;width: 90px;height: 20px;">
      <VoiceComponent1 :audioUrl="voiceContent[1].audioUrl"/> <!-- 将VoiceComponent包裹在点击区域内 -->
    </div>
  </div>
</template>
<script>
import VoiceComponent1 from "./VoiceComponent1.vue"; // 导入 VoiceComponent 组件
export default {
  name: "Index1",
  components: {
    VoiceComponent1, // 注册 VoiceComponent 组件
  },
  data() {
    return {
      voiceContent: [
        { id: "1", audioUrl: "images/indeximgs/audio3.mp3" },
        { id: "2", audioUrl: "images/indeximgs/audio1.mp3" },
        // 添加更多的语音内容
      ],
    };
  },
  // 其他方法和逻辑
};
</script>

<style scoped>

</style>